<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="com.zenithsun.news.newsinfo.model.Newsinfo"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	request.setAttribute("ctx", request.getContextPath());
	Newsinfo newsinfo = (Newsinfo)request.getAttribute("newsinfo");
%>
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="${ctx}/zenithsun/js/ModalUtil.js"></script>
	<!-- 
	<link rel="stylesheet" type="text/css" href="${ctx}/zenithsun/plugins/croppic/normalize.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/zenithsun/plugins/croppic/default.css">
	<link href="${ctx}/zenithsun/plugins/croppic/cropper.min.css" rel="stylesheet">
	<link href="${ctx}/zenithsun/plugins/croppic/main.css" rel="stylesheet">
	 -->
	<script type="text/javascript" src="${ctx}/zenithsun/plugins/Jcrop/js/jquery.Jcrop.js"></script>
	<link rel="stylesheet" href="${ctx}/zenithsun/plugins/Jcrop/css/jquery.Jcrop.css" type="text/css" />
	<link rel="stylesheet" href="${ctx}/zenithsun/css/cut-imgList.css" type="text/css" />
	<script type="text/javascript">
	  var picUploadUrl = "${ctx}/path/newsinfo/initPicUpload";
	  var listPicsUrl = "${ctx}/path/newsinfo/listImage";
	  var cutPicsUrl="${ctx}/path/newsinfo/cutCover";
	  var picTempPath = "";
	  var realPath='${ctx}';
	  var newsinfoId = "<%=newsinfo.getId()%>";
	  function showPicUploadModal(){
		  var url = picUploadUrl + "?newsinfoId=" + newsinfoId;
		  $("#pics").load(url);
	  }
	</script>
</head>
<body>
<div class="modal fade bs-example-modal-lg" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document" style="margin-top: 0">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">编辑图片新闻
        <c:if test="${review.state==0}">——草稿</c:if>
        <c:if test="${review.state==1}">——待审核</c:if>
        <c:if test="${review.state==2}">——审核不通过</c:if>
        <c:if test="${review.state==3}">——审核通过</c:if>
        </h4>
      </div>
      <div class="modal-body" id="modalCore">
        <form class="form-horizontal" role="form" id="aeForm" name="aeForm">
          <input type="hidden" name="id" value="${newsinfo.id}"/>
          <fieldset>
            <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
			  <ul id="myTabs" class="nav nav-tabs" role="tablist">
			    <li role="presentation" class="active"><a href="#baseInfo" role="tab" data-toggle="tab">新闻基本信息</a></li>
			    <li role="presentation"><a href="#pics" role="tab" data-toggle="tab">新闻图片</a></li>
			  	<li role="presentation"><a href="#coverPath" role="tab" data-toggle="tab">新闻封面</a></li>
			  </ul>
			  <div id="myTabContent" class="tab-content">
			    <div role="tabpanel" class="tab-pane fade in active" style="margin-top: 5px;" id="baseInfo" aria-labelledBy="home-tab">
			      <div class="form-group">
	              <label class="col-sm-2 control-label" for="isTop">新闻设置</label>
	              <div class="col-sm-8">
	              	<label class="checkbox-inline">
	                	<input type="checkbox" id="isTop" name="isTop" value="${newsinfo.isTop }" <c:if test="${newsinfo.isTop==1 }">checked</c:if> onclick="this.value=this.checked?1:0"> 主题置顶
	                </label>
	                <label class="radio-inline">
	                	<input type="checkbox" id="isCarousel" name="isCarousel" value="${newsinfo.isCarousel }" <c:if test="${newsinfo.isCarousel==1 }">checked</c:if> onclick="this.value=this.checked?1:0"> 首页轮播
	                </label>
	                <label class="radio-inline">
	                	<input type="checkbox" id="isStriking" name="isStriking" value="${newsinfo.isStriking }" <c:if test="${newsinfo.isStriking==1 }">checked</c:if> onclick="this.value=this.checked?1:0"> 文字突出
	                </label>
	              </div>
	            </div>
	
	            <div class="form-group">
	              <label class="col-sm-2 control-label" for="title">标题</label>
	              <div class="col-sm-9">
	                <input type="text" id="title" name="title" value="${newsinfo.title}" class="form-control" placeholder="必填项，25个汉字以内"/>
	              </div>
	            </div>
	            
	            <div class="form-group">
	              <label class="col-sm-2 control-label" for="subTitle">副标题</label>
	              <div class="col-sm-9">
	                <input type="text" id="subTitle" name="subTitle" value="${newsinfo.subTitle}" class="form-control" placeholder="25个汉字以内"/>
	              </div>
	            </div>
	            
	            <div class="form-group">
	              <label class="col-sm-2 control-label" for="publishGroup">新闻来源</label>
	              <div class="col-sm-3">
	                <input type="text" id="publishGroup" name="publishGroup" value="${newsinfo.publishGroup}" class="form-control" placeholder="25个汉字以内"/>
	              </div>
	              <label class="col-sm-1 control-label" for="photographer">摄影</label>
	              <div class="col-sm-2">
	                <input type="text" id="photographer" name="photographer" value="${newsinfo.photographer}" class="form-control" placeholder="10个汉字以内"/>
	              </div>
	              <label class="col-sm-1 control-label" for="editor">编辑</label>
	              <div class="col-sm-2">
	                <input type="text" id="editor" name="editor" value="${newsinfo.editor}" class="form-control" placeholder="10个汉字以内"/>
	              </div>
	            </div>
	            <!-- 
	            <div class="form-group">
	              <label class="col-sm-2 control-label" for="content">新闻内容</label>
	              <div class="col-sm-9">
	                <textarea type="text" rows="8" id="content" name="content" class="form-control">${newsinfo.content}</textarea>
	              </div>
				</div>
				 -->
	            <div class="form-group">
	              <label class="col-sm-2 control-label" for="newsColumnsName">所属栏目</label>
	              <div class="col-sm-3">
	              	<input type="hidden" id="newsColumnsId" name="newsColumns.id" value="${newsinfo.newsColumns.id}"/>
	              	<select id="newsColumnsName" name="newsColumnsName" class="form-control" style="background-color: #fff">
	              	  <c:forEach items="${newsColumnsList }" var="newsColumns">
	              	    <option value="${newsColumns.name }">${newsColumns.name }</option>
	              	  </c:forEach>
	              	</select>
	                <!-- <input type="text" id="newsColumnsName" name="newsColumnsName" value="${newsinfo.newsColumns.name}" class="form-control" onclick="openColumns();" readonly="readonly" style="background-color: #fff" placeholder="点击后弹出栏目选择框" />  -->
	              </div>
	              <label class="col-sm-1 control-label" for="keyword">关键字</label>
	              <div class="col-sm-5">
	                <input type="text" id="keyword" name="keyword" value="${newsinfo.keyword}" class="form-control" placeholder="5个以内，以逗号分隔"/>
	              </div>
	            </div>
	            
	            <div class="form-group">
	              <label class="col-sm-2 control-label" for="nabstract">新闻摘要</label>
	              <div class="col-sm-9">
	              	<textarea type="text" rows="6" id="nabstract" name="nabstract" class="form-control" placeholder="500个汉字或者1000个数字和字符以内">${newsinfo.nabstract}</textarea>
	              </div>
				</div>
				
			    </div>
			    <div role="tabpanel" class="tab-pane fade" style="margin-top: 5px;" id="pics" aria-labelledBy="profile-tab">
			    </div>
			    <!-- 封面 start-->
		    	<div role="tabpanel" class="tab-pane fade" style="margin-top: 5px;height:500px;" id="coverPath" aria-labelledBy="profile-tab">
					<div class="coverContainer" title="使用鼠标框选剪切封面图片" id="coverView">
						<img id="coverPathImage" src="${ctx}${newsinfo.coverPath}" alt="封面图片" onerror="noImage750(this)" style="position:relative;left:10px;top:10px;">
					</div>
					<div id="preview_box" class="crop_preview">
						<img id="crop_preview" src="${ctx}${newsinfo.coverPath}" onerror="noImage(this)" width="100%" />
					</div>
					<div class="cutImg-file">
						<div class="chsoeImg">选择图片</div>
						<input type="file" id="crop_upload_file" name="file" accept="image/*" />
     					<button type="button" class="btn btn-primary" id="crop_upload">确认上传图片</button>
					</div>
					<div class="cutImg-size">
						<label>比例：</label>
						<select id="aspectRatioSelect">
							<option value="1">1:1</option>
							<option value="2">2:1</option>
							<option value="3">3:1</option>
							<option value="1.5" selected="selected">3:2</option>
							<option value="4">4:1</option>
							<option value="1.3">4:3</option>
							<option value="5">5:1</option>
							<option value="2.5">5:2</option>
							<option value="1.6">5:3</option>
							<option value="1.25">5:4</option>
						</select>(宽:高)
							</br>
						<label>X：</label><input type="text" id="x_start" name="x_start" readonly="readonly"/></br>
						<label>Y：</label><input type="text" id="y_start" name="y_start" readonly="readonly"/></br>
						<input type="hidden" id="x_end" name="x_end" />
						<input type="hidden" id="y_end" name="y_end" />
						<label>宽：</label><input type="text" id="w" name="w" readonly="readonly"/></br>
						<label>高：</label><input type="text" id="h" name="h" readonly="readonly"/></br>
						<P class="cutImg-btn">
     						<button type="button" class="btn btn-success" id="crop_submit">确认剪裁</button>
						</P>
					</div>
				</div>
			  </div>
			<!-- generate code end -->
          </fieldset>
        </form>
        <div id="treeDlg"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="submitSaveNews(false);">保存</button>
        <c:if test="${needReview==true}">
        	<button type="button" class="btn btn-primary" onclick="submitSaveNews(true);">提交</button>
        </c:if>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
var isReview=false;
function submitSaveNews(review){
	isReview=review;
	$('#aeForm').bootstrapValidator('validate');
}
$('#aeForm').bootstrapValidator({
  message: 'This value is not valid',
	  feedbackIcons: {
	      valid: 'glyphicon glyphicon-ok',
	      invalid: 'glyphicon glyphicon-remove',
	      validating: 'glyphicon glyphicon-refresh'
	  },
	  fields: {
	      title: {
	    	  group: '.col-sm-3',
	          message: '标题输入不正确',
	          validators: {
	              notEmpty: {
	                  message: '新闻标题不能为空'
	              }
	          }
	      }
	  	}
}).on('success.form.bv', function(e, data) {
	if($("#newsColumnsName").val()==''){
		bootbox.alert("所属栏目不能为空");
	} else {
		if(typeof(saveEditUrl) == 'undefined'){
			saveEditUrl = "${ctx}/path/newsinfo/modNewsinfo";
		}
		var url = saveEditUrl + "?type=pic";
		url += "&isReview="+isReview;
		FormFunction.submitSave('edit',url);
	}
});

function openColumns() {
	var treeNewsColumnsViewUrl = "${ctx}/path/newscolumns/treenewscolumns";
	ModalUtil.showModal('treeDlg', treeNewsColumnsViewUrl,'treeNewsColumnsViewModal', function() {
		loadNewsColumnsData();
	});
}

function setColumnsValue(data) {
	$("#newsColumnsId").val(data.id);
	$("#newsColumnsName").val(data.text);
}
function setRemark(jsonObj){
}
</script>
<script type="text/javascript" src="${ctx}/zenithsun/news/newsinfo/js/imagecut.js"></script>
<script src="${ctx}/zenithsun/plugins/ajaxfileupload.js" type="text/javascript"></script>

</body>
</html>